@import "_flexbox";

.flex-1{
    @include flex(1);
}

// 方向: 水平;
.f--h {
    @include flexbox;
    @include align-items(stretch);
}

// 方向： 垂直;
.f--s {
    @include flexbox;
    @include align-items(stretch);
    @include flex-direction(column);
}

// 方向: 水平; 对齐: 水平居左, 垂直居中
.f--hlc {
    @include flexbox;
    @include flex-direction(row);
    @include align-items(center);
}

// 方向: 水平; 对齐: 水平居右, 垂直居中
.f--hrc {
    @include flexbox;
    @include flex-direction(row-reverse);
    @include align-items(center);
}

// 方向: 水平; 对齐: 水平居左, 垂直居上
.f--hlt {
    @include flexbox;
    @include flex-direction(row);
    @include justify-content(center);
}

// 方向: 水平; 对齐: 水平居中, 垂直居中
.f--hcc {
    @include flexbox;
    @include align-items(center);
    @include justify-content(center);
}

// 方向：垂直; 对齐：水平居左，垂直居中
.f--slc{
    @include flexbox;
    @include flex-direction(column);
    @include justify-content(center);
}



//隐藏
.hide {
    display: none;
}


/******************* 按钮 **************************/
//去掉按钮样式
.btn-clear{
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    outline: none;
}

/******************* ul **************************/
.ul-clear{
    margin: 0;
    padding: 0;
    list-style: none;
}

/******************* 圆角 **************************/
@mixin border-radius($radius) {
    border-radius: $radius;
}

/******************* 省略号 **************************/
//1行省略
%font-omitted {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

//多行省略
@mixin font-omitted($row) {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

/******************* 形状 **************************/
// 三角形
@mixin triangle ($size, $color, $direction) {
    height: 0;
    width: 0;

    //三角向上、向下、向右和向左时，设置边框样式
    @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
        border: solid $size / 2 transparent;

        @if $direction == up {
            border-bottom-color: $color;

        } @else if $direction == right {
            border-left-color:   $color;

        } @else if $direction == down {
            border-top-color:    $color;

        } @else if $direction == left {
            border-right-color:  $color;
        }
    }

    @else if ($direction == up-right) or ($direction == up-left) {
        border-top: $size solid $color;
        @if $direction == up-right {
            border-left:  $size solid transparent;
        } @else if $direction == up-left {
            border-right: $size solid transparent;
        }
    }

    @else if ($direction == down-right) or ($direction == down-left) {
        border-bottom: $size solid $color;
        @if $direction == down-right {
            border-left:  $size solid transparent;
        } @else if $direction == down-left {
            border-right: $size solid transparent;
        }
    }
}

.clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

